<h:panelGroup layout="block"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:nxu="http://nuxeo.org/nxweb/util"
  xmlns:nxd="http://nuxeo.org/nxweb/document"
  xmlns:c="http://java.sun.com/jstl/core">

  <a4j:outputPanel id="connectAppListing" layout="block">
    <div class="actionBar">
      <h:form>
        <h:outputText
          value="#{messages['label.nuxeo.connect.applisting.package']}" />
        <h:selectOneListbox class="dataInputText" size="1"
          value="#{appsViews.packageTypeFilter}">
          <f:ajax execute="@this" render="connectAppListing" event="change" />
          <nxu:selectItems value="#{appsViews.packageTypes}" var="itype"
            itemValue="#{itype.value}" itemLabel="#{messages[itype.label]}" />
        </h:selectOneListbox>
      </h:form>
      <h:form>
        <h:selectBooleanCheckbox class="dataInputText"
          value="#{appsViews.platformFilter}"
          id="platformFilter">
          <f:ajax execute="@this" render="connectAppListing" event="change" />
        </h:selectBooleanCheckbox>
        <h:outputLabel for="platformFilter" value="#{messages['label.appcenter.platform.filter']}" />
      </h:form>
      <h:form>
        <a4j:commandButton value="#{messages['admCommand.refresh']}"
          actionListener="#{appsViews.flushCache()}"
          render="connectAppListing" styleClass="button" />
      </h:form>

    </div>
    <span id="beforeIframe"></span>

    <h:outputScript target="#{pageJsTarget}">
    //<![CDATA[
    function displayConnectIframe() {
      var margin = 80;
      var min = 200;
      jQuery('#connectLoaderWaiter').css('display','none');
      var h = jQuery(document).height() - jQuery("#beforeIframe").position().top -margin;
      if (h < min) {
        h=min;
      }
      jQuery("#connectIframe").height(h);
      jQuery("#connectIframe").css("display","block");
    }
    //]]>
    </h:outputScript>

    <c:if test="#{connectServerReachable and registredConnectInstance}">
      <iframe id="connectIframe"
        src="#{contextPath}/site/connectClient/packages/private?type=#{appsViews.packageTypeFilter}&amp;filterOnPlatform=#{appsViews.platformFilter}"
        frameborder="0" scrolling="auto" width="100%" style="display: none"
        onload="javascript:displayConnectIframe();"> </iframe>

      <div id="connectLoaderWaiter"
        style="width: 100%; height: 100px; text-align: center">
        <img src="#{contextPath}/img/big_loading.gif" />
      </div>

    </c:if>

    <c:if test="#{not connectServerReachable}">
      <div class="processMessage completeInfo">
        <h:outputText value="#{messages['adminsubtab.servernotreachable']}" />
      </div>
    </c:if>

    <c:if test="#{not registredConnectInstance}">
      <div class="processMessage completeInfo">
        <h:outputText value="#{messages['adminsubtab.registrationRequired']}" />
      </div>
    </c:if>

  </a4j:outputPanel>

</h:panelGroup>